const Angular = require('angular');
const app = Angular.module('lineApp', []);
import './line.scss'
import echarts from 'echarts'
import _ from '../../../lib/lodash-vendor';
app.controller('lineCtr', ['$scope', function ($scope) {
  $scope.title = '折线图';
  $scope.timeUtil = {
    getHour(value) {
      return Math.floor(value / 3600000);
    },
    getMiute(value) {
      return Math.floor(value % 3600000 / 60000);
    },
    getSecond(value) {
      return Math.floor(value % 3600000 % 60000 / 1000);
    },
    returnTwo(value) {
      if (value < 10) {
        return `0${value}`;
      }
      return value;
    }
  }
  $scope.mainCtr = {
    title: '折线图',
    echartLineDom: '',
    echartBarDom: '',
    getData() {
      return new Promise((resolve, reject) => {
        const data = [{
          signInTime: '09:00:00',
          signBackTime: '18:00:00',
          date: '2020-07-01'
        }, {
          signInTime: '08:30:00',
          signBackTime: '18:00:00',
          date: '2020-07-02'
        },
        {
          signInTime: '08:50:00',
          signBackTime: '20:00:00',
          date: '2020-07-03'
        },
        {
          signInTime: '08:51:55',
          signBackTime: '20:00:00',
          date: '2020-07-04'
        },
        {
          signInTime: '08:51:55',
          signBackTime: '20:35:00',
          date: '2020-07-07'
        }]
        resolve(data);
      })
    },
    handleData(data) {
      let xAxisData = [];
      let barSeriesData = [];
      let lineSeriesData = [[], [], [], [], []];
      let yAxisData = [];
      _.forEach(data, item => {
        xAxisData.push(item.date);
        let nineHour = new Date(item.date + ' 09:00:00');
        let sixhtHalfHour = new Date(item.date + ' 18:00:00');
        let eightHalfHour = new Date(item.date + ' 20:30:00');
        let currentDate = new Date(item.date + ' 00:00:00');
        let signInTime = new Date(item.date + ' ' + item.signInTime);
        let signBackTime = new Date(item.date + ' ' + item.signBackTime);
        let time = ((signBackTime - signInTime) / 3600000 - 1).toFixed(1);
        lineSeriesData[0].push(signInTime - currentDate);
        lineSeriesData[1].push(signBackTime - currentDate);
        lineSeriesData[2].push(nineHour - currentDate);
        lineSeriesData[3].push(sixhtHalfHour - currentDate);
        lineSeriesData[4].push(eightHalfHour - currentDate);
        barSeriesData.push(time);
      });
      this.renderBar(xAxisData, barSeriesData);
      this.renderLine(xAxisData, lineSeriesData);
    },
    renderLine(xAxisData, seriesData) {
      let option = {
        title: {
          text: '上班签到签退情况统计'
        },
        legend: {
          show: true,
          data: ['签到时间', '签退时间'],
        },
        tooltip: {
          show: true,
          formatter(data, index) {
            let h = $scope.timeUtil.returnTwo($scope.timeUtil.getHour(data.value));
            let m = $scope.timeUtil.returnTwo($scope.timeUtil.getMiute(data.value));
            let s = $scope.timeUtil.returnTwo($scope.timeUtil.getSecond(data.value));
            return `${data.name} ${h}:${m}:${s}`;
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'time',
          axisLabel: {
            formatter(value, index) {
              let h = $scope.timeUtil.returnTwo($scope.timeUtil.getHour(value));
              let m = $scope.timeUtil.returnTwo($scope.timeUtil.getMiute(value));
              let s = $scope.timeUtil.returnTwo($scope.timeUtil.getSecond(value));
              return `${h}:${m}:${s}`;
            }
          },
          axisTick: {
            show: true,
            interval: 0
          },
          // min: 0,
          // max: 86399000
        },
        series: [{
          name: '签到时间',
          data: seriesData[0],
          type: 'line',
        }, {
          name: '签退时间',
          data: seriesData[1],
          type: 'line',
        }, {
          type: 'line',
          markLine: {
            silent: true,
            data: [{
              yAxis: 32400000
            }, {
              yAxis: 64800000
            }, {
              yAxis: 73800000
            }],
            itemStyle: {
              normal: {
                label: {
                  formatter(data) {
                    let h = $scope.timeUtil.returnTwo($scope.timeUtil.getHour(data.value));
                    let m = $scope.timeUtil.returnTwo($scope.timeUtil.getMiute(data.value));
                    let s = $scope.timeUtil.returnTwo($scope.timeUtil.getSecond(data.value));
                    return `${h}:${m}:${s}`;
                  }
                }
              }
            }
          }
        }
        ]
      }
      this.echartLineDom.setOption(option);
    },
    renderBar(xAxisData, seriesData) {
      let option = {
        title: {
          text: '上班时长统计'
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: seriesData,
          type: 'bar'
        }]
      };
      console.log(option)
      this.echartBarDom.setOption(option);
    },
    initDom() {
      this.echartLineDom = echarts.init($('.line-container')[0]);
      this.echartBarDom = echarts.init($('.bar-container')[0]);
    },
    init() {
      this.initDom();
      this.getData().then(res => {
        this.handleData(res);
      })
    }
  }
  $scope.mainCtr.init();
}]);